<template>
  <el-card class="login-card-wrap" :body-style="{padding:0}">
    <template #header>
      <div class="card-header">
        <span>登录</span>
      </div>
    </template>
    <div class="card-QR-code-login-wrap" v-show="loginMode==='QR'">
      <div class="QR-img-wrap">
        <el-image :src="QRcodeLoginImgUrl"></el-image>
        <div class="QR-code">
          <span>扫码登陆</span>
          <el-image :src="QRCodeUrl.value"></el-image>
          <!-- <el-image src=""></el-image> -->
        </div>
      </div>

      <el-button @click="toggleLoginMode('account')">账号密码登录</el-button>
    </div>
    <div class="card-account-login-wrap" v-show="loginMode==='account'">
      <el-form ref="loginFromRef" :rules="rules" :model="loginForm" class="login-form">
        <el-form-item label prop="phone">
          <el-input
            v-model="loginForm.phone"
            size="large"
            prefix-icon="User"
            placeholder="请输入网易云邮箱/手机号"
          />
        </el-form-item>
        <el-form-item label prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            show-password
            size="large"
            prefix-icon="Lock"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button @click="accountLogin">登录</el-button>
          <el-button @click="testmessage('549535136')">获取用户详情</el-button>
          <!-- <el-button @click="getLoginState">获取登陆状态</el-button> -->
          <!-- <el-button @click="testmessage">测试mesage</el-button> -->
        </el-form-item>
      </el-form>
      <div class="QR-login-hint-wrap" @click="toggleLoginMode('QR')">
        <el-image :src="QRcodeHintImgUrl"></el-image>
      </div>
    </div>
  </el-card>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref, onMounted, onBeforeMount } from "vue";
import { QRcodeLoginImgUrl, QRcodeHintImgUrl } from "../../assets/data/login";
import { HttpManager } from "../../api/index";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import useLoginCheckRules from "../../hooks/useLoginCheckRules";
import useUserDetail from "../../hooks/useGetUserDetail"
import useLoginQRCode from "../../hooks/useLoginQRCode";
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup() {
    const store = useStore();
    let QRCodeUrl = ref({});

    let loginMode = ref("account");
    let loginForm = reactive({ phone: "17261390609", password: "" });
    const router = useRouter();

    const rules = useLoginCheckRules(); //获取登录校验规则

    onMounted(async () => {
      //获取登录二维码

      QRCodeUrl.value = await useLoginQRCode();
    });

    const accountLogin = () => {
      //账号密码登录

      console.log("账号密码登录", loginForm);

      HttpManager.accountLogin(loginForm).then(async (res: any) => {
        console.log("Res", res);

        if (res.code === 200) {

          const userInfo = await useUserDetail(res.account.id)  
          console.log("登陆后获取到用户详情信息",userInfo);
          
          //登录成功
          store.dispatch("login",userInfo);

          ElMessage.success("登陆成功")


          router.push('/Home')
        }else if(res.code === 502){
            //账号或密码错误
            ElMessage.warning(res.message)
        }
         else if (res.code === 400) {
          
          ElMessage.error('登陆失败')
        }
      });
    };

    const testmessage = async(id)=>{

        const userInfo = await useUserDetail(id)  
        
        console.log("登陆后获取到用户详情信息",userInfo);
    }

    const logout = () => {
      //退出登录
      HttpManager.logout().then((res: any) => {
        store.dispatch("logout");
      });
    };

    const getLoginState = () => {
      //获取登录状态
      HttpManager.getLoginState().then((res: any) => {
        console.log("Res", res);
      });
    };

    const toggleLoginMode = (mode) => {
      //切换登录方式
      loginMode.value = mode;
    };

    // getQRCode();
    console.log("QRCodeUrl", QRCodeUrl);

    return {
      QRcodeLoginImgUrl,
      QRcodeHintImgUrl,
      QRCodeUrl,
      loginMode,
      loginForm,
      rules,
      toggleLoginMode,
      accountLogin,
      logout,
      getLoginState,
      testmessage,
      useUserDetail
    };
  },
});
</script>
 
<style lang = "scss" scoped>
@import "../../assets/css/login.scss";
</style>